<template>
  <div class="app-container">
    <box-card class="box-card-query">
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="注册证书类型" prop="certificateType">
          <el-cascader v-model="queryParams.certificateType" placeholder="注册证书类型" :options="optionsCertificateTypes"
            :props="cascaderCertificateTypesProps" clearable style="min-width: 320px;" />
        </el-form-item>
        <el-form-item label="注册专业" prop="registerMajor">
          <el-input v-model="queryParams.registerMajor" placeholder="注册专业" clearable style="min-width: 320px;"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="归属地区" prop="registeredAreaId">
          <el-cascader v-model="queryParams.registeredAreaId" placeholder="归属地区" :options="optionsArea"
            :props="cascaderProps" clearable style="min-width: 320px;" />
        </el-form-item>
        <el-form-item label="证书编号" prop="certificateCode">
          <el-input v-model="queryParams.certificateCode" placeholder="证书编号" clearable style="min-width: 320px;"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="注册编号" prop="registerCode">
          <el-input v-model="queryParams.registerCode" placeholder="注册编号" clearable style="min-width: 320px;"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="注册单位" prop="registerCompany">
          <el-input v-model="queryParams.registerCompany" placeholder="注册单位" clearable style="min-width: 320px;"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="注册主体人" prop="registerPerson">
          <el-input v-model="queryParams.registerPerson" placeholder="注册主体人" clearable style="min-width: 320px;"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </box-card>

    <box-card class="mt24">
      <el-row class="mb10">
        <el-col :span="12">
        </el-col>
        <el-col :span="12" style="display: flex; align-items: center; justify-content: flex-end;">
          <el-button type="primary" link @click="handleAdd">我有资料需要共享至公海池>></el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="dataList" stripe>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="证书编号" prop="certificateCode" width="120" />
        <el-table-column label="注册编号" prop="registerCode" width="140" />
        <el-table-column label="注册证书类型" prop="certificateType" width="140" />
        <el-table-column label="注册专业" prop="registerMajor" width="140" />
        <el-table-column label="注册单位" prop="registerCompany" minWidth="180" />
        <el-table-column label="注册主体人" prop="registerPerson" width="120" />
        <el-table-column label="归属单位" prop="registeredCompany" width="120" />
        <el-table-column label="归属人" prop="registeredPerson" width="120" />
        <el-table-column label="来源" prop="sourceCompanyName" minWidth="180">
          <template #default="scope">
            <div>{{ scope.row.sourceCompanyName }} - {{ scope.row.sourceUserName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="160" />
        <el-table-column label="沟通记录" prop="communicateQty" width="100" />
        <el-table-column label="操作" fixed="right" width="100" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" @click="handleReceive(scope.row)">领取</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </box-card>

    <el-dialog title="新增证书信息" v-model="open" width="900px" :align-center="true" append-to-body>
      <el-form :model="form" :rules="rules" ref="formRef" :inline="true" label-width="100">
        <el-row>
          <el-col :span="8" class="sub-title">
            <svg-icon class-name="arrow-left" icon-class="arrow-left"></svg-icon>
            <span class="title">基本信息</span>
          </el-col>
        </el-row>
        <el-row class="mt24">
          <el-col :span="12">
            <el-form-item label="证书编号" prop="certificateCode">
              <el-input v-model="form.certificateCode" placeholder="证书编号" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册编号" prop="registerCode">
              <el-input v-model="form.registerCode" placeholder="注册编号" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证书类型" prop="certificateType">
              <el-cascader v-model="form.certificateType" placeholder="证书类型" :options="optionsCertificateTypes"
                :props="cascaderCertificateTypesProps" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册专业" prop="registerMajor">
              <el-input v-model="form.registerMajor" placeholder="注册专业" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="注册单位" prop="registerCompany">
              <el-input v-model="form.registerCompany" placeholder="注册单位" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册主体人" prop="registerPerson">
              <el-input v-model="form.registerPerson" placeholder="注册主体人" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="归属地区" prop="registeredAreaId">
              <el-cascader v-model="form.registeredAreaId" placeholder="归属地区" :options="optionsArea"
                :props="cascaderProps" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属公司" prop="registeredCompany">
              <el-input v-model="form.registeredCompany" placeholder="归属公司" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact">
              <el-input v-model="form.contact" placeholder="请输入联系人" clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="contactMobile">
              <el-input v-model="form.contactMobile" placeholder="请输入联系方式" maxlength="11" clearable
                style="min-width: 320px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="需求" prop="demand">
              <el-input v-model="form.demand" placeholder="请输入需求" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                clearable style="min-width: 320px;" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
          <el-button @click="cancelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus"
const { proxy } = getCurrentInstance()
import { getOpenCertificateList, addCertificate, claimOpenSea } from '@/api/opensea'
import { getAreas, getRegisterCertificateTypes } from '@/api/common'

const loading = ref(false)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  certificateCode: undefined,
  certificateType: undefined,
  contact: undefined,
  contactMobile: undefined,
  registerCode: undefined,
  registerCompany: undefined,
  registeredAreaId: undefined,
  registeredCompany: undefined,
  registerMajor: undefined,
  registerPerson: undefined,
})

const open = ref(false)
const form = ref({
  certificateCode: undefined,
  certificateType: [],
  contact: undefined,
  contactMobile: undefined,
  demand: undefined,
  registerCode: undefined,
  registerCompany: undefined,
  registerMajor: undefined,
  registerPerson: undefined,
  registeredAreaId: [],
  registeredCompany: undefined
})
const rules = {
  certificateCode: [{ required: true, trigger: "blur", message: "请输入证书编号" }],
  registerCode: [{ required: true, trigger: "blur", message: "请输入注册编号" }],
  certificateType: [{ required: true, trigger: "blur", message: "请选择证书类型" }],
  registerMajor: [{ required: true, trigger: "blur", message: "请输入注册专业" }],
  registerCompany: [{ required: true, trigger: "blur", message: "请输入注册单位" }],
  registerPerson: [{ required: true, trigger: "blur", message: "请输入注册主体人" }],
  registeredAreaId: [{ required: true, trigger: "blur", message: "请选择归属地区" }],
  registeredCompany: [{ required: true, trigger: "blur", message: "请输入归属公司" }],
  contact: [{ required: true, trigger: "blur", message: "请输入联系人" }],
  contactMobile: [
    { required: true, trigger: "blur", message: "请输入联系方式" },
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" },
  ],
}
const dataList = ref([])
const submitLoading = ref(false)

function getList() {
  loading.value = true
  getOpenCertificateList(queryParams.value).then(res => {
    console.log('getOpenCertificateList:', res)
    loading.value = false
    if (res.code === 200) {
      dataList.value = res.data.list
      total.value = res.data.total
    }
  })
}

const cascaderProps = {
  value: 'id',
  label: 'areaName',
  expandTrigger: 'hover',
  checkStrictly: true,
  // emitPath: false,
}

const optionsArea = ref([])

function fetchAreas(parentId) {
  getAreas({ parentId }).then(res => {
    console.log('fetchAreas:', res)
    if (res.code === 200) {
      optionsArea.value = res.data
    }
  })
}

const cascaderCertificateTypesProps = {
  value: 'id',
  label: 'name',
  expandTrigger: 'hover',
  checkStrictly: true,
  // emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
}
const optionsCertificateTypes = ref([])

function fetchRegisterCertificateTypes(parentId) {
  getRegisterCertificateTypes({ parentId }).then(res => {
    console.log('optionsCertificateTypes:', res)
    if (res.code === 200) {
      optionsCertificateTypes.value = res.data
    }
  })
}

function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function handleReceive(item) {
  ElMessageBox.confirm(`你是否确认领取："证书编号：${item.certificateCode},注册专业：${item.registerMajor}, 注册单位：${item.registerCompany}，注册主体人：${item.registerPerson}" 的公海信息？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    claimOpenSea({
      id: item.id,
      type: 2, // 证书
    }).then(res => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess(res.data)
        getList()
      }
    })
  }).catch(() => { })
}
function reset() {
  proxy.resetForm("formRef")
}
// 新增
function handleAdd() {
  open.value = true
  reset()
}
function cancelDialog() {
  open.value = false
  submitLoading.value = false
  reset()
}
function submitForm() {
  proxy.$refs.formRef.validate(valid => {
    if (valid) {
      submitLoading.value = true
      addCertificate(form.value).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess(res.data)
          cancelDialog()
          getList()
          // ElMessageBox.alert(res.data, "系统提示", {
          //   dangerouslyUseHTMLString: true,
          //   type: "success",
          // }).then(() => {
          //   console.log('1111111111')
          //   cancelDialog()
          //   submitLoading.value = false
          //   getList()
          // }).catch(() => { })
        }
      }).catch(() => {
        submitLoading.value = false
      })
    }
  })
}

getList()
fetchAreas(100000)
fetchRegisterCertificateTypes(0)
</script>

<style lang="scss" scoped>
.box-card-query {
  padding-bottom: 0;
}
</style>